<template>
  <div class="container">
    <el-drawer
      custom-class="wxkj-drawer forward-drawer"
      :title="drawerTitle"
      :visible.sync="drawerShow"
      size="500"
    >
      <div class="drawer-content">
        <el-form ref="form" :model="form" label-width="100px" :rules="rules">


          <el-form-item  label="省份/直辖市" prop="sourceId">
            <el-select clearable v-model="form.sourceId" filterable @change="change" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>


          <el-form-item v-show="false" label="id：" prop="id">
            <el-input v-model="form.id" />
          </el-form-item>
<!--          <el-form-item label="名称：" prop="name">-->
<!--            <el-input v-model="form.name" placeholder="请输入" />-->
<!--          </el-form-item>-->
          <el-form-item label="排序：" prop="sequence">
            <el-input
              v-model="form.sequence"
              max-length="9"
              placeholder="填写整数"
              @input="formInput('sequence')"
              @keyup.enter.native="handleFilter"
            />
          </el-form-item>
          <!--          <el-form-item label="是否显示：" prop="disabled">-->
          <!--            <el-radio-group v-model="form.disabled">-->
          <!--              <el-radio :label="false">是</el-radio>-->
          <!--              <el-radio :label="true">否</el-radio>-->
          <!--            </el-radio-group>-->
          <!--          </el-form-item>-->
          <el-form-item class="fr">
            <el-button @click.native="drawerShow = false">取消</el-button>
            <el-button type="primary" @click.native="submit()" :loading='submitLoading'>确认</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import { blockDataAdd ,block_list_v2} from '@/api/block'
  //import { baseData } from '@/api/common'
  import store from '@/store'
  export default {
    components: {},
    props: {},
    data() {
      return {
        options: [{
          value: '全部',
          label: '全部'
        } ],
        drawerTitle: '',
        drawerShow: false,
        submitLoading : false,
        topBlockId:"",
        areaData:null,
        form: {
          id: '',
          sourceId: '',
          blockId :'',
         // type: '',
          title: '',
          sequence: 1
        },
        value: '',
        rules: {
          // name: [
          //   { required: true, message: '请输入内容', trigger: 'blur' }
          // ]
        }
      }
    },
    watch: {
      drawerShow(bl) {
        if (!bl){
          this.$refs.form.resetFields()
        }
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    async created() {
      if (this.$store.state.app.areaData.length === 0) {
        const res = await store.dispatch('app/getArea', 'area')
        this.areaData = JSON.parse(JSON.stringify(res.result))


        // if (!this.areaData[0].label !== '全部') {
        //   this.areaData.unshift({ label: '全部', value: '' })
        // }
      }else {
        this.areaData = JSON.parse(JSON.stringify(this.$store.state.app.areaData))
        // if (this.areaData[0].label !== '全部') {
        //   this.areaData.unshift({ label: '全部', value: '' })
        // }
      }
    //  console.log("===XXXXXXXXXXXXXXXX===>")
      console.log("======>",this.areaData[0].label,this.areaData[2].label)


      let  options= [];

      for (let i=0;i<this.areaData.length;i++) {
        let  element=this.areaData[i];
       // console.log(element);
        if(element.id!=this.form.id){
          let option={
            value: '',
            label: ''
          }
          option.label=""+element.label;
          option.value=element.value;
          options.push(option);

        }
      }//end of for
      this.options=options;


    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    // 销毁
    destroyed() {},
    // 方法
    methods: {
      // 输入整数
      formInput(e) {
        this.form[e] = this.form[e].replace(/[^\d]/g, '')
      },
      change(e) {
        //console.log("sourcefdfds"+e);
        this.form.sourceId=e;
        this.form.title=this.changeValue(e);

        console.log("title---->"+this.form.title);
      },

      changeValue(value) {
       // console. log(value);
        let obj = {};
        obj = this . options. find((item)=>{
          return item.value === value;
        });
        console. log(obj . label);
        return obj.label;
      },

      // 弹窗打开
      show(title, topBlockId, rowData) {
        this.topBlockId=topBlockId;
        this.drawerTitle = title
        this.drawerShow = true
        if(null!=rowData){
          // 编辑传参
          try {
            if (rowData) {
              Object.keys(rowData).forEach(k => {
                this.form[k] = rowData[k]
              })
            }
          } catch (e) {
            // TODO handle the exception
          }
        }else {//新增

          this.form.parentId = this.topBlockId
          this.form.sourceId=null;
          //console.log(rowData.id);
          // this.form.id = rowData.id
        }

        // if(''!=id){
        //
        // }

        //下拉框


/*********
        block_list_v2({"parentId":this.topBlockId,"pageSize":100000000}).then(response => {
          let list = response.result.records;
          //this.total = 1;
          let  options= [{
            value: this.topBlockId,
            label: '顶级'
          } ];

          for (let i=0;i<list.length;i++) {
            let  element=list[i];
            console.log(element);
            if(element.id!=this.form.id){
              let option={
                value: '',
                label: ''
              }
              option.label=""+element.name;
              option.value=element.id;
              options.push(option);

            }
          }//end of for
          this.options=options;
        })//end of block_list_v2
 ******/

      },


      // 保存
      submit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            console.log(this.form)
            this.submitLoading = true;
            this.form.blockId=this.topBlockId;
            console.log("------------>",this.form.blockId)

            const blocks = []
            const that = this
            let i = 0

            let form=this.form;
            // console.log("您选择的数据："+row.id +" " +row.title,index);
            const b = {}
            b.id =  form.id
            b.sourceId =  form.sourceId

            b.open = false
            b.type = null;
            b.title =   form.title;
            b.blockId = this.form.blockId
            console.log("sourceId========>",form.sourceId,form.title)
           // b.image = row.thumb
            b.sequence =1
            blocks.push(b)


            blockDataAdd(blocks).then(response => {
              this.$message({
                type: 'success',
                message: this.form.id ? '保存成功!' : '添加成功！'
              })
              this.drawerShow = false
              this.submitLoading = false;
              this.$emit('refresh')
            }).catch(err => {
              this.submitLoading = false;
            })
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
</style>
